<template>
    <div class="funnel-box">
        <div :ref="refName" class="funnel-echarts" :id="refName"></div>
    </div>
</template>

<script>
import echarts from 'echarts'
import { formatFunnel } from '@/assets/js/quTeam'
export default {
    props: {
        funnelData: {
            type: Object,
            default: {}
        },
        refName: {
            type: String,
            default: ''
        }
    },
    data () {
        return {
            legendData: [],
            seriesData: []
        }
    },
    watch: {
        funnelData: {
            handler: function (val) {
                if (val) {
                    this.legendData = formatFunnel(this.funnelData).legendData
                    this.seriesData = formatFunnel(this.funnelData).seriesData
                    this.initEcharts()
                }
            },
            deep: true
        }
    },
    methods: {
        initEcharts () {
            let myChart = echarts.init(document.getElementById(this.refName))

            let option = {
                legend: {
                    data: this.legendData
                },
                series: [
                    {
                        name: '外层',
                        type: 'funnel',
                        left: '12%',
                        width: '76%',
                        label: {
                            formatter: '{b}'
                        },
                        labelLine: {
                            show: false
                        },
                        itemStyle: {
                            opacity: 0.8
                        },
                        data: this.seriesData[0]
                    },
                    {
                        name: '内层',
                        type: 'funnel',
                        left: '15%',
                        width: '70%',
                        maxSize: '70%',
                        label: {
                            position: 'inside',
                            formatter: '{c}',
                            color: '#000'
                        },
                        itemStyle: {
                            opacity: 0.8
                        },
                        data: this.seriesData[1]
                    }
                ]
            }

            myChart.setOption(option)
        }
    }
}
</script>

<style lang="scss">
    .funnel-box {
        display: flex;
        justify-content: center;
        .funnel-echarts {
            width: 700px;
            height: 500px;
        }
    }
</style>
